<?php
    $necessidade = $_GET['nec'];
    $necessidade2 = $_GET['nec2'];
    $cliente = $_GET['c'];
    $data = $_GET['dt'];
    
     //Gerar recomendação
     $produtos = Produto::listarProdutosQuestionario($necessidade, $necessidade2);    
?>

</br></br>
<h1>Recomendações de Produtos</h1>
</br></br>
<form action="index.php?modulo=<?= Historico::NOME_MODULO?>&acao=incluir" method="post">
<input type="hidden" name="campoForm_idCliente" value="<?= $cliente ?>"/>
<input type="hidden" name="campoForm_data" value="<?= $data ?>"/>
<div id="galeria" class="gallery">
<ul class="cf">  
<?php
for ($i = 0; count($produtos) > $i; $i++){
   if($i == 0){echo "<li class='groups'> <ul>";}
   
   if ($i >= 2 && $i%3 == 0){
       echo "</ul></li> <li class='groups next'> <ul> ";
   }
   echo"<li class='item'><input type='checkbox' name='item[]'  value='".$produtos[$i]->getId()."' id='".$produtos[$i]->getId()."'><label for='".$produtos[$i]->getId()."'><img src='imagens/Produtos/".$produtos[$i]->getId().".png'><div class='hint'><h4>".$produtos[$i]->getNome()."</h4> <p>Preço: ".$produtos[$i]->getPreco()."</p></div></label>";
   echo"</li>";
}
echo "</ul></li>";
?>
<li class="groups hide">
    <ul>
        <li class='item'><img class="imagemProduto" src="imagens/Produtos/376.png"><div class='hint'><h4></h4><p>Preço:</p></div></li>
        <li class='item'><img class="imagemProduto" src="imagens/Produtos/379.png"><div class='hint'><h4></h4><p>Preço:</p></div></li>
        <li class='item'><img class="imagemProduto" src="imagens/Produtos/329.png"><div class='hint'><h4></h4><p>Preço:</p></div></li>
    </ul>
</li>
</ul>
    <div class="control">
        <span class="next"></span>
        <span class="back"></span>
    </div>  
</div>
<button class='btn' type="submit">Salvar Histórico de Venda</button>
</form>
<script>
    
    var active = 0;
    var gal = $(".gallery").children("ul");
    var li =  gal.children(".groups");    
    var max = li.length;
    
    $(".gallery").find(".control .next").click(function(){
        next();
    });
    $(".gallery").find(".control .back").click(function(){
        back();
    });
    function next(){
        if(active+1===max)
           return;
        active++;        
        render();
    }
    function back(){
        if(!active)
            return;
        active--;        
        render();
    }
    function render(){
        li.each(function (index, element){
            var el = $(element);
            el.removeClass("hide").removeClass("next");
            if(index === active + 1)
                el.addClass("next");                
            else if(index !== active)
                el.addClass("hide");            
    });
    }
</script>
    